<template>
  <view class="popup-mask" v-if="visible" :catchtouchmove="true">
    <view class="popup-container" @click.stop>
      <view class="popup-content">
        <view class="search-box">
          <view class="search-btn">链接保护板</view>
          <view class="search-cancel" @click="handleCancel">取消</view>
        </view>
        <scroll-view class="device-box" :scroll-y="true">
          <view
            class="device-item"
            :class="index == bindIndex ? 'item-active' : ''"
            v-for="(item, index) in deviceList"
            :key="item"
            @click="handleBind(index)">
            <view class="label">
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="popup-actions">
        <button class="cancel-button" @click="handleCancel">取消</button>
        <button class="confirm-button" @click="handleConfirm">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  props: {
    curMac: {
      type: String,
      default: '',
    },
    deviceList: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  name: 'ProtectBluetooth',
  data() {
    return {
      searchIng: false,
      devices: [],
      visible: false,
      bindIndex: -1,
    }
  },
  mounted() {},
  methods: {
    ...mapActions({
      setBatteryData: 'battery/setBatteryData',
    }),
    show() {
      this.visible = true
    },

    handleMaskClick() {
      this.$emit('close')
    },
    handleCancel() {
      this.visible = false
      this.$emit('cancel')
    },
    handleConfirm() {
      if (this.bindIndex < 0) {
        uni.showToast({
          title: '请选择设备',
          icon: 'none',
        })
        return
      }
      let bindItem = this.deviceList[this.bindIndex]
      this.visible = false
      this.$emit('confirm', bindItem)
    },
    handleBind(index) {
      this.bindIndex = index
    },
  },
}
</script>

<style lang="scss" scoped>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.popup-container {
  background-color: #fff;
  width: 80%;
  padding: 24rpx;
  border-radius: 10px;
  overflow: hidden;
}

.popup-content {
  padding: 20px;
}

.search-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: MicrosoftYaHei;
  font-size: 41rpx;
}
.search-box .search-btn {
  width: calc(100% - 178rpx);
  height: 78rpx;
  text-align: center;
  line-height: 77rpx;
  background: #574166;
  color: #ffffff;
  border-radius: 5rpx 5rpx 5rpx 5rpx;
}
.search-box .search-cancel {
  width: 158rpx;
  height: 76rpx;
  line-height: 78rpx;
  text-align: center;
  // background: #3a2b44;
  border-radius: 5rpx 5rpx 5rpx 5rpx;
  border: 1px solid #3a2b44;
  color: #3a2b44;
}
.popup-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #574166;
}

.cancel-button,
.confirm-button {
  height: 85rpx;
  line-height: 85rpx;
  flex: 1;
  text-align: center;
  border: none;
  background: none;
  border-radius: 0;
  font-family: MicrosoftYaHei;
  font-size: 40rpx;
}

.cancel-button {
  color: #666666;
  border-right: 1px solid #574166;
}

.confirm-button {
  color: #ff0000;
}

.cancel-button:hover,
.confirm-button:hover {
  background-color: #f0f0f0;
}

.device-box {
  min-height: 300rxp;
  max-height: 800rpx;
  overflow-y: scroll;
}
.device-box .device-item {
  width: calc(100% - 40rpx);
  height: 100rpx;
  border-radius: 20rpx;
  margin-top: 20rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f9f9fb;
  color: #1e263b;
}

.device-box .device-item .label {
  width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}

.device-box .device-item .status {
  width: 140rpx;
  height: 58rpx;
  background-color: #e1e3ee;
  border-radius: 38rpx;
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #1e263b;
  line-height: 58rpx;
  text-align: center;
}

.device-box .device-item .status-ok {
  background-color: #443f56;
  color: #ffffff;
}

.device-box .item-active {
  background-color: #443f56;
  color: #ffffff;
}
</style>
